<!-- 用户管理 -->
<template>
  <div class="myuser">
    <div class="usertitle">用户资料信息列表</div>
    <!-- 新增 搜索 -->
    <div class="user_1">
      <div class="user_2">
        <el-button type="primary" @click="openadd()">新增用户</el-button>
        <el-button type="primary" style="margin-left: 20px;" @click="openImp">用户授权</el-button>
      </div>
      <div class="user_3">
        <el-input v-model="input" placeholder="请输入搜索信息(员工姓名)"  style="width:200px ; margin-right: 10px;" />
        <el-select v-model="value" class="m-2" placeholder="全部" style="width:100px ; margin-right: 10px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" style="margin-right: 10px;" @click="finddata">查询</el-button>
        <el-button type="primary" style="margin-right: 10px;" @click="finddataa">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
      <div class="user_4">
        <UserControlTable :tableData="tableData" :input = "input" ref="appli"></UserControlTable>
      </div>
      <div class="user_5">
        <p style="margin-left: 10px;">总共有 <span style="color: red;">{{total}}</span> 条管理用户信息</p>
        <el-pagination 
          background 
          layout="prev, pager, next"
          :total="total" 
          :small="small"
          style="margin-left: 400px;" 
          :page-size="pageSize"
          @size-change="handleSizeChange"
          :currentPage="currentPage"
          @current-change="handleCurrentChange"
          />
      </div>
      <!-- 用户授权 -->
      <UserControlAdd :isshowConlook="isshowConlook" :tableData="tableData" @close="closelookbtn" @guanbi = "guanbi"></UserControlAdd>
  </div>
</template>
  
<script lang="ts">
import {reactive, ref,defineComponent,onMounted} from "vue";
import  UserControlTable  from "./UserControlTable.vue";
import  UserControlAdd  from "./UserControlAdd.vue";
import { useRouter } from 'vue-router'
import { log } from "console";
export default defineComponent({
  components:{
    UserControlTable,UserControlAdd
  },
  
   setup(){
    onMounted(()=>{
      window.sessionStorage.setItem("tableData",JSON.stringify(tableData ))
    })
    interface User {
    id: number,
      username:string,
      admin:string,
      staffname:string,
      depname:string,
      date:string,
      impower:string,
      password:string
  }
    let input = ref("");
    let value = ref('')
    let isshowConlook = ref(false)
    
    interface mydata{
      id: number,
      username:string,
      admin:string,
      staffname:string,
      depname:string,
      date:any,
      impower:string,
      password:string,
      zwlb:string
    }
    const userRouter = useRouter()
    let options:Array<{
      value:string
    }> =reactive([
        { value: 'Option3'},
        { value: 'Option2'},
    ])
    let tableData = reactive([
      { id: 1,
        username:"xitongguangliyuan",
        admin:"系统管理员",
        staffname:"王文敏",
        depname:"研发部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 2,
        username:"liwenlong2015",
        admin:"系统管理员",
        staffname:"李文龙",
        depname:"研发部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 3,
        username:"qiuzhijie2015",
        admin:"系统管理员",
        staffname:"邱志杰",
        depname:"研发部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 4,
        username:"wangbobo015",
        admin:"业务管理员",
        staffname:"王博",
        depname:"业务部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 5,
        username:"weijinzhi2015",
        admin:"售后管理员",
        staffname:"韦淦芝",
        depname:"人事部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"禁用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 6,
        username:"liwenlong2015",
        admin:"系统管理员",
        staffname:"李文龙",
        depname:"研发部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 7,
        username:"liushijing2016",
        admin:"业务管理员",
        staffname:"刘诗静",
        depname:"制作部",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 8,
        username:"xiaxiaofang2015",
        admin:"业务管理员",
        staffname:"方丽琴",
        depname:"总经办",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"启用",
        password:"123456",
        zwlb :"技术经理"
      },
      { id: 9,
        username:"jiangyouhua2016",
        admin:"售后管理员",
        staffname:"姚诚磊",
        depname:"阅港",
        date:"Sun Sep 18 2022 00:00:00 GMT+0800 (中国标准时间)",
        impower:"禁用",
        password:"123456",
        zwlb :"技术经理"
      },]
    )
     
    function openadd(){
      isshowConlook.value = true
    }
    function closelookbtn(a:mydata){
      isshowConlook.value = false
      tableData.push(a)
    }
    function guanbi(){
      isshowConlook.value = false
    }
    function openImp(){
      userRouter.push("/UserControlImpower")
    }
    // 查询
    function finddata(){
      if (input.value !==''){
          let arr:any = reactive([]) //装查找出的数据
        tableData.forEach((i)=>{
          let reg = new RegExp(input.value);  //正则
        if(tableData[i.id - 1].staffname.match(reg)){
          //  console.log(tableData[i.id - 1]);  
          arr.push (tableData[i.id - 1])
        }
        })
        tableData.length = 0
        input.value = ''
        tableData.push(...arr)
        console.log(tableData);
      }
      // sliceTableData();

    //  console.log(arr);
    //  
     
    }
    // 重置
    function finddataa(){
      // sliceTableData ()
     let arr:any=  sessionStorage.getItem("tableData");
     tableData.length = 0
      tableData.push(...JSON.parse(arr))
      // console.log();
    }
    // 分页
    let pageSize: any = ref(5); //每页条数
    let currentPage: any = ref(1); //当前第几页
    let total = ref(tableData.length); //总条数
    let small = ref(false);
     //改变每页的条数
     const handleSizeChange = (val: number) => {
      pageSize = ref(val);
      sliceTableData();
      console.log(123);
      // console.log(`${val} items per page`);
    };
     //改变当前的页数
     const handleCurrentChange = (val: number) => {
      currentPage = ref(val);
      console.log(currentPage.value);
      
      sliceTableData();
      // console.log(currentPage);
      // console.log(`current page: ${val}`);
    };
    function sliceTableData (){
        let start:number = (currentPage.value - 1) * pageSize.value;
        let end :number
        if (currentPage.value == tableData.length) {
        //只有一条数据
        end = tableData.length;
      } else {
        end = start + pageSize.value;
        
      }
      // tableData= (tableData.slice(start, end))
      console.log(start,end);
      
    }
    sliceTableData();
    return {
      input,value,options,tableData,isshowConlook,
      closelookbtn,openadd,openImp,finddata,finddataa,
      guanbi,handleCurrentChange,total,currentPage,pageSize,
      sliceTableData,handleSizeChange,small
    }
   },
  })

</script>

<style scoped lang="less">
.myuser {
  width: calc(100% - 40px);
  height: 100%;
  // background-color: skyblue;
}
.usertitle {
  width: calc(100% -40px);
  height: 100px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user_1 {
  width: calc(100% -40px);
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #D7D7D7;
}
.user_2{
    margin-left: 10px;
}
.user_3{
    display: flex;
}
.user_4{
    margin-top: 10px;
}
.user_5{
  width: calc(100% -40px);
  height: 40px;
  display: flex;
  align-items: center;
}
</style>